<template>
  <view class="address-list">
    <!-- 地址列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view 
        class="address-item" 
        v-for="(item, index) in addressList" 
        :key="index"
        @click="selectAddress(item)"
      >
        <view class="address-main">
          <view class="name-phone">
            <text class="name">{{item.name}}</text>
            <text class="phone">{{item.phone}}</text>
            <text class="default" v-if="item.isDefault">默认</text>
          </view>
          <view class="detail">
            {{item.province}}{{item.city}}{{item.district}}{{item.detail}}
          </view>
        </view>
        <view class="address-edit" @click.stop="editAddress(item)">
          <uni-icons type="compose" size="20" color="#999"></uni-icons>
        </view>
      </view>
    </scroll-view>
    
    <!-- 新增地址按钮 -->
    <view class="add-btn" @click="addAddress">
      <text>新增收货地址</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          province: '广东省',
          city: '深圳市',
          district: '南山区',
          detail: '科技园路1号',
          isDefault: true
        },
        {
          id: 2,
          name: '李四',
          phone: '13900139000',
          province: '北京市',
          city: '朝阳区',
          district: '',
          detail: '建国路88号',
          isDefault: false
        }
      ],
      isSelectMode: false // 是否为选择地址模式
    }
  },
  onLoad(options) {
    if (options.select) {
      this.isSelectMode = true
    }
    // 实际项目中这里应该请求API获取地址列表
    this.getAddressList()
  },
  methods: {
    getAddressList() {
      // 模拟获取地址列表
    },
    addAddress() {
      uni.navigateTo({
        url: '/pages/user/address/edit'
      })
    },
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/user/address/edit?id=${item.id}`
      })
    },
    selectAddress(item) {
      if (this.isSelectMode) {
        // 返回选择的地址
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        prevPage.$vm.address = item
        uni.navigateBack()
      }
    }
  }
}
</script>

<style>
.address-list {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
  padding: 20rpx;
}
.address-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.address-main {
  flex: 1;
}
.name-phone {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}
.name {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
}
.phone {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
}
.default {
  font-size: 24rpx;
  color: #fff;
  background-color: #ff2d4a;
  padding: 4rpx 10rpx;
  border-radius: 20rpx;
}
.detail {
  font-size: 28rpx;
  color: #666;
}
.address-edit {
  width: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-btn {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 32rpx;
}
</style>